<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
  content="width=device-width, initial-scale=1">
  <title>我为2018全球博研同学慈善年会打call！ —— 中大博研教育</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">
  <link rel="stylesheet" type="text/css" href="__STATIC__/assets/css/amazeui.css" />
  <link rel="stylesheet" type="text/css" href="__STATIC__/shuiyin/style.css" />
  <link rel="stylesheet" type="text/css" href="__STATIC__/webupload/cropper.css" />
</head>
<body>
  <div id="map"></div>
  <div class="am-container">
    <img src="__STATIC__/shuiyin/images/index_head.png" class="am-img-responsive">
  </div>

  <div class="am-container select-img">
    <input id="btn1" type="file" accept="image/*,camera"  style="opacity: 0;"/>
    <button type="button" class="am-btn am-btn-default am-radius am-btn-block am-btn-xl upload_btn js-modal-open" id="upload_btn" style="margin-top: 60px;">请选择图片，为博研带盐</button>
  </div>
  <div class="am-container hin loading" style="display: none;margin-top: 20px;">
    <img class="am-img-responsive am-center" src="__STATIC__/webupload/loading.gif" />
  </div>


<!-- <div class="am-container hin">
    <button type="button" class="am-btn am-btn-success am-radius am-btn-block am-btn-xl sure_btn" id="sure_btn" style="display: none;">确定裁剪</button>
  </div> -->

  <div class="am-container hin cropend-div">
    <h1 class="am-text-center cropend-text" style="display: none;color: #daaf63;">裁剪预览</h1>
    <div class="am-container " id="img-preview"></div>
    <div class="am-container input-group hin" style="display: none;">
      <fieldset class="am-form-set">
        <input class="am-form-field" maxlength="6" type="text" placeholder="请填写姓名（请勿超过6个字）" id="value1">
        <input class="am-form-field" maxlength="12" type="text" placeholder="请填写单位（请勿超过12个字）" id="value2">
        <input class="am-form-field" maxlength="18" type="text" placeholder="请填写祝辞（请勿超过18个字）" id="value3">
      </fieldset>
    </div>
    <button type="button" class="am-btn am-btn-success am-radius am-btn-block am-btn-xl hin create_btn" id="create_btn" style="display: none;" >生成图片</button>

    <button type="button" class="am-btn am-btn-danger am-radius am-btn-block am-btn-xl hin reset_crop_btn" id="reset_crop_btn" style="display: none;margin-top: 20px;" >重新裁剪</button>
  </div>
  <div class="am-container create-div">
    <h1 class="am-text-center create-text" style="display: none;color: #daaf63;">长按图片可保存</h1>
    <img class="am-img-responsive am-center result-img" id="result-img" src="">
    <a id="down"></a>
  </div>
  <div class="am-container hin">
    <!-- <button type="button" class="am-btn am-btn-success am-radius am-btn-block am-btn-xl hin save_pic_btn" id="save_pic_btn" style="display: none;" >保存图片</button> -->
    <button type="button" class="am-btn am-btn-danger am-radius am-btn-block am-btn-xl hin reset_input_btn" id="reset_input_btn" style="display: none;" >重填信息</button>
  </div>
<!-- 
  <div class="am-container am-img-responsive hin img-preview"  style="width:340px;height: 640px;overflow: hidden;display: none;"></div> -->
  <footer data-am-widget="footer" class="am-footer " data-am-footer="{  }">
    <div class="am-footer-miscs ">
      <p>粤ICP备17054205号</p>
      <p>联系热线：<a href="tel:400-111-9990">400-111-9990</a></p>
      <!--    <p>联系邮箱：<a href="mailto:s@zddba.net">s@zddba.net</a></p>   -->
      <p>CopyRight © 2009-2017 AllMobilize Inc.</p>
      <p>由 <a href="http://wpa.qq.com/msgrd?v=3&uin=410606308&site=qq&menu=yes" title="Hin Trinh" target="_blank" class="">Hin Trinh</a>
      提供技术支持</p>
    </div>
  </footer>
  <div class="am-popup" id="my-popup">
    <div class="am-popup-inner">
      <div class="am-popup-hd">
        <h4 class="am-popup-title">裁剪</h4>
        <span data-am-modal-close
        class="am-close">&times;</span>
      </div>
      <div class="am-popup-bd" style="border-bottom: 1px solid #dedede;
      border-radius: 2px 2px 0 0;">
      <div class=" upload-img" style="">
        <img class="am-img-responsive" src="">
      </div>
    </div>
    <!-- <div class="am-modal-footer">
      <span class="am-modal-btn am-modal-btn-bold" id="sure_btn" >确定</span>
    </div> -->
    <div class="am-container am-g" style="position: fixed;bottom: 5px;z-index: 999;">
      <button type="button" class="am-u-sm-5 am-btn am-btn-success am-radius am-btn-xl sure_btn am-icon-check" id="sure_btn" style="display: none;opacity: 1"></button>
      <button onclick="close_modal()" class="am-u-sm-5 am-btn am-btn-danger am-radius am-btn-xl am-icon-close"></button>
    </div>
  </div>
</body>
<script type="text/javascript" src="__STATIC__/webupload/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/webupload/cropper.js"></script>
<script type="text/javascript" src="__STATIC__/lrz/lrz.bundle.js"></script>
<script type="text/javascript" src="__STATIC__/webupload/index.js"></script>
<script type="text/javascript" src="__STATIC__/assets/js/amazeui.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
  wx.config({
    debug: false,
    appId: '{$appId}',
    timestamp:{$timestamp},
    nonceStr: '{$nonceStr}',
    signature:'{$signature}',
    jsApiList:['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo']
  });

  wx.ready(function() {
    var _title = '{$_title}';
    var _desc = '{$_desc}';
    var _imgUrl = '{$_imgUrl}';
    var _shareLink = '{$_shareLink}';

    wx.onMenuShareAppMessage({
      title: _title,
      desc: _desc, // 分享描述
      link: _shareLink, // 分享链接
      imgUrl: _imgUrl,
      type: '',
      dataUrl: '',
      success: function () {


      },
      cancel: function () {
      }
    });
    wx.onMenuShareTimeline({
      title: _title, // 分享标题
      link: _shareLink, // 分享链接
      imgUrl: _imgUrl, // 分享图标
      success: function () {
      // 用户确认分享后执行的回调函数

      },
      cancel: function () {
      // 用户取消分享后执行的回调函数
      }
    });

    wx.onMenuShareQQ({
      title: _title, // 分享标题
      desc: _desc, // 分享描述
      link: _shareLink, // 分享链接
      imgUrl: _imgUrl,
      success: function () {
      // 用户确认分享后执行的回调函数
      },
      cancel: function () {
      // 用户取消分享后执行的回调函数
      }
    });

    wx.onMenuShareWeibo({
      title: _title, // 分享标题
      desc: _desc, // 分享描述
      link: _shareLink, // 分享链接
      imgUrl: _imgUrl, // 分享图标
      success: function () {
      // 用户确认分享后执行的回调函数

      },
      cancel: function () {
      // 用户取消分享后执行的回调函数
      }
    });
  });
function close_modal(){
  $('#my-popup').modal('toggle');
}
</script>
</html>
